<template>
  <div class="view">
    <Panel :title="title">
      <p>可见状态</p>
      <icon-btn></icon-btn>
      <p>*课程名称</p>
      <el-input v-model="input" placeholder="请输入课程名称">{{name}}</el-input>
      <p>*课程简介</p>
      <!-- <el-icon><EditPen /></el-icon> -->
      <icon-btn name="编辑" icon="edit" @click.native="goEditClassroom(scope.row.id)"></icon-btn>
      <icon-btn name="删除" icon="trash" @click.native="deleteClassroom(scope.row.id)"></icon-btn>
      <el-input v-model="input" placeholder="请输入课程简介"></el-input>
       <p>*教学目标</p>
      <icon-btn name="编辑" icon="edit" @click.native="goEditClassroom(scope.row.id)"></icon-btn>
      <icon-btn name="删除" icon="trash" @click.native="deleteClassroom(scope.row.id)"></icon-btn>
      <el-input v-model="input" placeholder="请输入教学目标"></el-input>
      <p>*内容概览</p>
      <icon-btn name="编辑" icon="edit" @click.native="goEditClassroom(scope.row.id)"></icon-btn>
      <icon-btn name="删除" icon="trash" @click.native="deleteClassroom(scope.row.id)"></icon-btn>
      <el-input v-model="input" placeholder="请输入内容概览"></el-input>
      <p>*参考资料</p>
      <icon-btn name="编辑" icon="edit" @click.native="goEditClassroom(scope.row.id)"></icon-btn>
      <icon-btn name="删除" icon="trash" @click.native="deleteClassroom(scope.row.id)"></icon-btn>
      <el-input v-model="input" placeholder="请输入参考资料"></el-input>
      <p><el-button type="primary">保存</el-button></p>
    </Panel>
  </div>
</template>

<script>
import api from '../../api.js'
// Simditor是写好的编辑栏组件，我们可以直接引入使用
import Simditor from '../../components/Simditor.vue'

export default {
  name: 'CreateCourse',
  components: { Simditor },
  data () {
    return {
      title: '添加课程',
      course: {
        name: '',
        description: '',
        goal: '',
        content: '',
        references: '',
        visible: false
      }
    }
  },
  mounted () {
    if (this.$route.name === 'edit-course') {
      this.title = '编辑课程'
      api.getCourse(this.$route.params.courseId).then(res => {
        this.course = res.data.data
      }).catch(() => {
      })
    }
  },
  methods: {
    saveCourse () {
      let funcName = this.$route.name === 'edit-course' ? 'editCourse' : 'createCourse'
      let data = Object.assign({}, this.course)
      console.log(data)
      // api[funcName](data).then(res => {
      //   this.$router.push({name: 'course-list', query: {refresh: 'true'}})
      // }).catch((e) => {
      // })
    },
    goEditClassroom (classroomId) {
      let courseId = this.courseId
      this.$router.push({name: 'edit-classroom', params: {classroomId, courseId}})
    },
    deleteClassroom (classroomId) {
      api.deleteClassroom(classroomId).then(res => {
        if (res.status === 200) {
          this.getClassroomList(1)
        }
      })
    }
  }
}
</script>
